<template>
  <div class="his">
    <div class="search">
      <form action="">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @keydown.enter="onSearch($event)"
          @cancel="onCancel"
        ></van-search>
      </form>
    </div>
    <div class="history-log" v-show="flag">
      <!-- 历史记录 -->
      <History></History>
    </div>
    <div class="hot-log" v-show="flag">
      <!-- 热门搜索 -->
      <HotSearch></HotSearch>
    </div>
    <div class="search-content" v-show="!flag">
      <SearchList>
        <van-row type="flex" gutter="20" justify="space-between">
          <van-col
            span="12"
            v-for="i in oSearch"
            :key="i.id"
            @click="getGoods(i)"
          >
            <img :src="i.list_pic_url" alt="" />
            <!-- 用路由 -->
            <div>
              <a href="#">{{ i.name }}</a>
            </div>
            <div>￥{{ i.retail_price }}</div>
          </van-col>
        </van-row>
      </SearchList>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import History from "../components/History";
import HotSearch from "../components/HotSearch";
import SearchList from "../components/SearchList";
export default {
  naem: "SearchHistory",
  components: { History, HotSearch, SearchList },
  data() {
    return {
      value: "",
      flag: true,
      oSearch: [],
    };
  },
  methods: {
    onSearch(e) {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      this.$bus.$emit("addHistory", e.target.value);
      this.flag = false;
      axios({
        url: "http://localhost:8080/api/searchGoods",
        method: "POST",
        params: {
          searchVal: this.value,
        },
      }).then(
        (response) => {
          const category = response.data;
          console.log(category);
          this.oSearch = category;
        },
        (error) => {
          console.log(error.message);
        }
      );
      axios({
        url: "http://192.168.33.238/api/searchGoods",
        method: "POST",
        params: {
          searchVal: this.value,
        },
      }).then(
        (response) => {
          const category = response.data;
          console.log(category);
          this.oSearch = category;
        },
        (error) => {
          console.log(error.message);
        }
      );
    },
    onCancel() {
      this.$bus.$emit("exitPopup");
    },
    //点击以后搜索栏值变为点击的值并搜索
    addSearch(value) {
      this.value = value;
    },
    getGoods(item) {
      this.$router.push(`/productdetail/${item.id}`);
    },
  },
  mounted() {
    this.$bus.$on("addSearch", this.addSearch);
  },
  beforeDestroy() {
    this.$bus.$off("addSearch");
  },
  watch: {
    value: {
      deep: true,
      handler() {
        if (this.value == "") {
          this.flag = true;
        }
      },
    },
  },
};
</script>

<style scoped>
.his {
  background-color: rgb(245, 238, 238);
}
img {
  padding: 0 10%;
  margin: 10% 0;
  display: block;
  width: 80%;
  height: 80%;
  background-color: white;
}
</style>